<template>
	<view class="page">
		<view v-if="token && isLogin" class="body">
			<template v-if="loadingState.default">
				<loading :loadingState="loadingState"></loading>
			</template>
			<template v-else>
				<view class="tool-list">
					<!-- v-if="item.has_dev.length>0 || item.count>0" -->
					<view class="item" v-for="(item, index) in list.has_dev" :key="index">
						<view class="tool-info-wrap">
							<view class="icon"><image :src="image_path + item.url_file" mode="widthFix"></image></view>
							<view class="info">
								<view class="name">{{ item.name }}</view>
								<view v-if="!item.has_dev" class="num">{{ item.count }}台</view>
							</view>
							<view class="btn-area" v-if="!item.has_dev">
								<!-- v-if="item.has_dev.length==0 -->
								<view class="btn lb" @click="goList('map', item.number, null, item.name, item.id,null, item.url_file)">设备地图</view>
								<view class="btn lb" @click="goList('list', item.number, null, item.name, item.id)">设备列表</view>
								<!-- <template v-if="item.has_dev&&item.has_dev>0">
										<navigator
											:url="'/package_common/map/map?dev_type='+subitem.number+'&dev_count='+subitem.count+'&dev_name='+subitem.name+'&typeid='+subitem.id+'&url_file='+subitem.url_file"
											hover-class="none" class="btn lb">设备地图</navigator>
										<view class="btn lb" @click="goList('map',subitem.number,subitem.name,subitem.id)">设备列表</view>
									</template>
									<template v-else>
										<view class="btn lb" @click="goList('map',item.number,null,item.name,item.id,item.url_file)">设备地图</view>
										<view class="btn lb" @click="goList('list',item.number,null,item.name,item.id)">设备列表</view>
									</template> -->
							</view>
							<view v-if="item.has_dev" class="sub-tool-btn">
								<view class="circle-icon"></view>
								<view class="circle-icon"></view>
								<view class="circle-icon"></view>
							</view>
						</view>
						<template v-if="item.has_dev && item.has_dev.length > 0">
							<view class="sub-tool-wrap m-t2">
								<view v-for="(subitem, subindex) in item.has_dev" :key="subindex">
									<template v-if="subitem.count > 0">
										<view class="sub-item">
											<view class="name-bar">
												<view class="name">{{ subitem.name }}</view>
												<view class="count">{{ subitem.count }}台</view>
											</view>
											<view class="btn-area">
												<!-- <navigator
													:url="'/package_common/map/map?dev_type='+subitem.number+'&dev_count='+subitem.count+'&dev_name='+subitem.name+'&typeid='+subitem.id+'&url_file='+subitem.url_file"
													hover-class="none" class="btn lb">设备地图</navigator> -->
												<view class="btn lb" @click="goList('map', item.number, subitem.number, subitem.name, item.id,subitem.id)">设备地图</view>
												<view class="btn lb" @click="goList('list', item.number, subitem.number, subitem.name, item.id,subitem.id)">设备列表</view>
											</view>
										</view>
									</template>
								</view>
							</view>
						</template>
					</view>

					<template>
						<view class="title">推荐设备</view>
						<!-- #ifndef APP-PLUS -->
						<view class="item" v-if="item.child.length > 0 || item.count == 0" v-for="(item, index) in list.not_dev" :key="item.id">
						<!-- #endif -->
						<!-- #ifdef APP-PLUS -->
						<view class="item" v-if="item.child.length > 0 || item.count == 0" v-for="(item, index) in list.not_dev" :key="'not_dev'+item.id">
						<!-- #endif -->
							<view class="tool-info-wrap">
								<view class="icon"><image :src="image_path + item.url_file" mode="widthFix"></image></view>
								<view class="info">
									<view class="name">{{ item.name }}</view>
								</view>
								<view class="btn-area"><view class="btn zx" @click="tellphone">咨询订购</view></view>
							</view>
							<view class="sub-tool-wrap m-t2">
								<view v-for="(subitem, subindex) in item.child" :key="subindex">
									<template v-if="subitem.count == 0">
										<view class="sub-item">
											<view class="name-bar">
												<view class="name">{{ subitem.name }}</view>
											</view>
										</view>
									</template>
								</view>
							</view>
						</view>
					</template>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
import { WEB_HOST } from '@/config.js';
import loading from '@/components/loading-more.vue';
import permision from '@/common/permission.js';
export default {
	name: 'name',
	data() {
		return {
			appid: getApp().globalData.appid,
			token: uni.getStorageSync('token'),
			isLogin: false,
			userInfo: uni.getStorageSync('userInfo'),
			loginStateUpdate: false,
			loadingState: {
				default: true
			},
			list: {},
			image_path: WEB_HOST,
			timer: null
		};
	},
	async onLoad() {
		if (this.token) {
			this.isLogin = await this.$loginState('check');
			if (this.isLogin) {
				this.list = await this.getDevNumber();
			} else {
				this.isLogin = await this.$loginState('reset');
			}
		}
	},
	async onShow() {
		if (this.loginStateUpdate) {
			this.userInfo = uni.getStorageSync('userInfo');
			this.token = uni.getStorageSync('token');
			this.loginStateUpdate = false;
			this.isLogin = true;
			this.list = await this.getDevNumber();
		}
		if (!this.token && !this.isLogin) {
			this.isLogin = await this.$loginState('reset');
		}
	},
	methods: {
		// 获取设备列表
		getDevNumber: async function() {
			let res = await this.$api.tool_api.getDevTypeCount({
				appid: this.appid,
				token: this.token,
				user_id: this.userInfo.uid
			});
			if (res.data.ret == 1000) {
				this.loadingState.default = false;
				let data = {
					has_dev: [],
					not_dev: []
				};
				console.log(res);
				res.data.data.forEach(item => {
					if (item.child.length > 0) {
						let has_dev = [];
						let not_dev = [];
						item.child.forEach(subitem => {
							if (subitem.count > 0) {
								has_dev.push(subitem);
								item.has_dev = has_dev;
							} else {
								not_dev.push(subitem);
								item.not_dev = not_dev;
							}
						});
					}
					if ((item.has_dev && item.has_dev.length > 0) || item.count > 0) {
						data.has_dev.push(item);
					}
					if ((item.not_dev && item.not_dev.length > 0) || item.count == 0) {
						data.not_dev.push(item);
					}
				});

				console.log('data: ', data);
				return data;
			}
		},

		goList: function(type, number, subnumber, name, id,subid, file) {
			// 'list',item.number,null,item.name,item.id
			let index = '',
				subindex = 0,
				url = '',
				url_file = '',
				dev_count = '';

			this.list.has_dev.forEach((item, i) => {
				if (item.id == id) {
					index = i;
					if (item.has_dev && item.has_dev.length > 0) {
						item.has_dev.forEach((subitem, si) => {
							if (subitem.id == subid) {
								subindex = si;
								url_file = subitem.url_file;
								dev_count = subitem.count;
							}
						});
					} else {
						subindex = 0;
						dev_count = item.count;
					}
				}
			});
			if (type == 'map') {
				// url=`/package_common/map/map?dev_type=${subnumber}&dev_name=${name}&dev_count=${dev_count}&typeid=${id}&changetype=${index}-${subindex}&url_file=${url_file}`
				// :url="'/package_common/map/map?dev_type='+subitem.number+'&dev_count='+subitem.count+'&dev_name='+subitem.name+'&typeid='+subitem.id+'&url_file='+subitem.url_file"
				if (subnumber == null) {
					url = `/package_common/map/map?dev_type=${number}&dev_name=${name}&dev_count=${dev_count}&typeid=${id}&changetype=${index}-${subindex}&url_file=${file}`;
				} else {
					url = `/package_common/map/map?dev_type=${subnumber}&dev_name=${name}&dev_count=${dev_count}&typeid=${subid}&changetype=${index}-${subindex}&url_file=${url_file}`;
				}
			} else if (type == 'list') {
				if (subnumber == null) {
					url = `/package_common/list/list?dev_type=${number}&dev_name=${name}&typeid=${id}&changetype=${index}-${subindex}`;
				} else {
					url = `/package_common/list/list?dev_type=${subnumber}&dev_name=${name}&typeid=${subid}&changetype=${index}-${subindex}`;
				}
			}
			uni.navigateTo({
				url: url
			});
		},

		// 拨打电话
		tellphone: function() {
			// #ifndef APP-PLUS
			this.call();
			// #endif
			
			// #ifdef APP-PLUS
			this.requestPhonePermission();
			// #endif
		},
		
		call(){
			uni.makePhoneCall({
				phoneNumber: '020-85286020'
			});
		},
		
		//检测APP  定位权限是否授权
		async requestPhonePermission() {
			let _this = this;
			var result = await permision.requestAndroidPermission('android.permission.CALL_PHONE');
			// console.log(result);
			var strStatus;
			if (result == 1) {
				strStatus = '已获得授权';
				this.call();
			} else {
				uni.showModal({
					title: '温馨提示',
					content: '检测到您未开启拨打电话权限,是否开启。',
					confirmText: '去设置',
					success(res) {
						if (res.confirm) {
							permision.gotoAppPermissionSetting();
						}
					}
				});
			}
		}
	},

	components: {
		loading
	},
	computed: {
		loginUpdate() {
			return this.$store.state.loginStateUpdate;
		}
	},
	watch: {
		loginUpdate(newer, older) {
			if (newer) {
				this.token = uni.getStorageSync('token');
				this.userInfo = uni.getStorageSync('userInfo');
				this.getDevNumber();
			}
		}
	}
};
</script>

<style lang="less">
.tool-list {
	.title {
		padding: 0 20rpx;
		border-left: 8rpx solid #09f;
		font-size: 34rpx;
		font-weight: bold;
	}

	.item {
		margin: 20rpx 0;
		padding: 20rpx 0 0 20rpx;
		background: #ffffff;
	}
}

.tool-info-wrap {
	display: flex;
	align-items: center;
	.icon {
		width: 100rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.info {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex-grow: 2;

		.name {
			margin-bottom: 8rpx;
			font-size: 32rpx;
			font-weight: bold;
		}

		.num {
			font-size: 28rpx;
			color: #999;
			font-weight: bold;
		}
	}

	.btn-area {
		display: flex;
		.btn {
			@h: 50rpx;
			height: @h;
			line-height: @h;
			padding: 0 10rpx;
			margin-right: 20rpx;
			border: 2rpx solid #ccc;
			border-radius: 10rpx;
			font-size: 28rpx;
		}
		.zx {
			background: #09f;
			color: #fff;
		}
	}

	.sub-tool-btn {
		width: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;

		.circle-icon {
			width: 8rpx;
			height: 8rpx;
			margin: 0 5rpx;
			background: #ccc;
			border-radius: 50%;
		}
	}
}

.btn-wrap {
	@h: 50rpx;
	display: flex;
	justify-content: flex-end;
	border-top: 2rpx solid #eee;
	padding: 20rpx 20rpx 20rpx 0;

	.btn {
		height: @h;
		line-height: @h;
		padding: 0 10rpx;
		margin-left: 20rpx;
		border: 2rpx solid #ccc;
		border-radius: 10rpx;
		font-size: 28rpx;
	}

	.zx {
		background: #09f;
		color: #fff;
	}
}

.sub-tool-wrap {
	border-top: 2rpx solid #eee;

	.sub-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 20rpx;
		line-height: 80rpx;
		border-bottom: 2rpx solid #eee;

		.name-bar {
			display: flex;

			.name {
				margin-right: 10rpx;
				font-size: 30rpx;
			}

			.count {
				font-size: 28rpx;
				color: #999;
				font-weight: bold;
			}
		}

		.btn-area {
			@h: 50rpx;
			display: flex;
			margin-right: 20rpx;

			.btn {
				height: @h;
				line-height: @h;
				padding: 0 10rpx;
				margin-left: 20rpx;
				border: 2rpx solid #ccc;
				border-radius: 10rpx;
				font-size: 28rpx;
			}

			.zx {
				background: #09f;
				color: #fff;
			}
		}
	}
}
</style>
